<template>
  <div class="dw-menu-group-warpper">
    <div style="display: flex; width: 100%; border-bottom: 1px solid var(--el-menu-border-color); align-items: center">
      <el-menu ellipsis :default-active="activeId" mode="horizontal" @select="handleSelect" style="flex: 1">
        <el-menu-item index="datagrid" class="menu-item-box">
          <div class="menu-item-datagrid-content">
            <el-icon v-if="datagridMenuInfo.icon">
              <component :is="datagridMenuInfo.icon"></component>
            </el-icon>
            <el-icon v-else><Grid /></el-icon>
            {{ datagridMenuInfo.menuItemName }}
          </div>
        </el-menu-item>
        <el-menu-item :index="item.id" v-for="(item, index) in formMenuList" :key="index">
          <div class="menu-item-box">
            <div class="menu-item-form-content">
              <span v-if="item.state?.value" :style="{ color: item.state?.color }" v-text="item.state?.label"></span>
              {{ item.menuItemName }}
            </div>
            <div class="menu-item-close">
              <el-icon @click.stop="close(item.id)"><CircleCloseFilled /></el-icon>
            </div>
          </div>
        </el-menu-item>
        <el-menu-item>
          <el-button size="small" @click="onAddFormMenu" ref="buttonRef">
            <el-icon><Plus /></el-icon>
          </el-button>
        </el-menu-item>
      </el-menu>
      <div style="display: flex; width: 200px; border-left: 1px solid var(--el-menu-border-color); height: 39px; align-items: center; justify-content: center">
        <el-space v-if="activeId !== 'datagrid'">
          <el-button type="primary" @click="onSave" size="small">保存</el-button>
          <el-button type="success" @click="onSaveAdd" size="small">保存后新增</el-button>
          <slot name="formBtn"></slot>
        </el-space>
      </div>
    </div>
    <div class="dw-menu-item-content-warpper">
      <div class="datagrid-warpper" v-show="activeId === 'datagrid'">
        <slot name="datagrid"></slot>
      </div>
      <slot name="menuGroupform" :activeId="activeId" :form-menu-list="formMenuList"></slot>
    </div>
  </div>
</template>

<script lang="ts" setup generic="T extends IMasterEntity">
import { nextTick, watch } from 'vue';
import { ref, type PropType } from 'vue';
import type { IMenuItem } from '@/types/menu-group';
import { dwDeepClone } from '@/utils/func';
import type { IMasterEntity } from '@/types/entity';

const buttonRef = ref();
defineOptions({
  name: 'DwMenuGroup',
});
const props = defineProps({
  datagridMenuInfo: {
    type: Object as PropType<IMenuItem>,
    required: true,
  },
  beforeClose: {
    type: Function,
    default: () => {
      return true;
    },
  },
});
const emits = defineEmits(['onAddFormMenu', 'handleSelect', 'onSave', 'onSaveAdd']); //新增事件
const datagridMenuInfo = ref<IMenuItem>(dwDeepClone(props.datagridMenuInfo));
const formMenuList = ref<Array<IMenuItem>>([]);
const activeId = ref<string>('datagrid');

const activeFormData = defineModel<T>('activeFormData');
const formDataMap = defineModel<Record<string, T>>('formDataMap');

const handleSelect = (key: string) => {
  activeId.value = key;
};
const onAddFormMenu = () => {
  emits('onAddFormMenu');
};
const addFormMenu = (menuItem: IMenuItem) => {
  formMenuList.value.push(menuItem);
  activeId.value = menuItem.id; //激活
};
const close = async (id: string | undefined) => {
  if (!id) {
    id = activeId.value;
  }
  const data = formMenuList.value.filter((item) => item.id !== id);
  const beforeCloseResult = props.beforeClose(data);
  if (beforeCloseResult) {
    //删除列表中的数据
    delete formDataMap.value![id];
    formMenuList.value = data;
    await nextTick();
    activeId.value = 'datagrid';
  }
};
const openFormMenu = (menuItem: IMenuItem) => {
  formMenuList.value.push(menuItem);
  activeId.value = menuItem.id;
};
const setEditState = (menuItemName: string) => {
  for (let i = 0; i < formMenuList.value.length; i++) {
    if (formMenuList.value[i].id === activeId.value) {
      formMenuList.value[i].menuItemName = menuItemName;
      formMenuList.value[i].state = {
        value: 'edit',
        label: '【编辑】',
        color: 'green',
      };
    }
  }
};
const setAddState = async (menuItemName: string, callback: (index: number) => void) => {
  for (let i = 0; i < formMenuList.value.length; i++) {
    if (formMenuList.value[i].id === activeId.value) {
      formMenuList.value[i].menuItemName = menuItemName;
      formMenuList.value[i].state = {
        value: 'add',
        label: '【新增】',
        color: 'red',
      };
      await nextTick();
      callback(i);
      break;
    }
  }
};

const getActiveFormIndex = (): number => {
  let index: number = 0;
  for (let i = 0; i < formMenuList.value.length; i++) {
    if (formMenuList.value[i].id === activeId.value) {
      index = i;
      break;
    }
  }
  return index;
};

const setActiveId = (id: string) => {
  activeId.value = id;
};

watch(
  () => activeId.value,
  (newData: string, oldData: string) => {
    if (activeId.value.indexOf('menu-item') > -1) {
      if (formDataMap.value && formDataMap.value[activeId.value]) {
        activeFormData.value = formDataMap.value[activeId.value];
      }
    }
    emits('handleSelect', newData, oldData);
  },
  { deep: true },
);
const onSave = () => {
  emits('onSave');
};
const onSaveAdd = () => {
  emits('onSaveAdd');
};
defineExpose({
  openFormMenu,
  setActiveId,
  getActiveFormIndex,
  setEditState,
  setAddState,
  addFormMenu,
  close,
});
</script>
<style lang="scss" scoped>
.dw-menu-group-warpper {
  width: 100%;
  height: 100%;
  background-color: #fff;
}
.dw-menu-item-content-warpper {
  height: calc(100% - 38px);
}
.el-menu--horizontal {
  --el-menu-horizontal-height: 38px;
}
.el-menu--horizontal .el-menu-item:not(.is-disabled):focus,
.el-menu--horizontal .el-menu-item:not(.is-disabled):hover {
  background-color: #fff;
}
.el-menu--horizontal.el-menu {
  border-bottom: 0px;
}
ul {
  margin: 0;
  padding: 0;
}
ul li {
  margin: 0;
  padding: 0;
}
.menu-item-box {
  display: flex;
  min-width: 60px;
}
.menu-item-button {
  width: 60px;
}
.menu-item-datagrid-content {
  padding: 0 10px;
}

.menu-item-form-content {
  padding: 0 6px;
}
.menu-item-close {
  visibility: hidden;
}
.menu-item-box:hover .menu-item-close {
  visibility: visible;
  opacity: 1;
}
.datagrid-warpper {
  width: 100%;
  height: 100%;
}
</style>
